<template>
  <div :class="(ideaLabelGroup==undefined||ideaLabelGroup==null)?'idea-form':''">
    <template v-if="ideaLabelGroup==undefined||ideaLabelGroup==null">
      <el-form>
        <div class="el-table el-table--fit el-table--border">
          <div class="el-table__body-wrapper">
            <table cellspacing="0" cellpadding="0" border="0" class="el-table__body wfIdeas-container">
              <tbody>
                <template v-for="(wfIdea,index) in wfIdeaList">
                  <tr v-if="showEmptyLabel||!wfIdea.isNull||(curTN.tnIdeaPosition===1&&wfIdea.ideaLabelName===curTN.tnIdeaLabelName)" :key="index">
                    <td class="tdlbl tdw17">{{ wfIdea.ideaLabelName }}</td>
                    <td class="tdcont tdw83" colspan="5">
                      <div v-if="wfIdea.ideaContent" class="ideaContentDiv" v-html="wfIdea.ideaContent" />
                      <IdeaInputBox v-if="curTN.tnIdeaPosition===1&&wfIdea.ideaLabelName===curTN.tnIdeaLabelName" :submit-handle="submitHandle" :common-idea-list="commonIdeaList" />
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
      </el-form>
    </template>
    <template v-else>
      <template v-for="(labels,group) in ideaLabelGroup">
        <div :key="group" class="section-title idea-group">
          <p class="l-text">{{ group==='ungrouped'?'其它意见': group }}</p>
        </div>
        <el-form :key="group" :model="vo">
          <div class="el-table el-table--fit el-table--border">
            <div class="el-table__body-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="el-table__body wfIdeas-container">
                <tbody>
                  <template v-for="(wfIdea,index) in wfIdeaList">
                    <tr v-if="labels.indexOf(wfIdea.ideaLabelName)!==-1&&(showEmptyLabel||!wfIdea.isNull)" :key="index">
                      <td class="tdlbl tdw17">{{ wfIdea.ideaLabelName }}</td>
                      <td class="tdcont tdw83" colspan="5">
                        <div v-if="wfIdea.ideaContent" class="ideaContentDiv" v-html="wfIdea.ideaContent" />
                        <IdeaInputBox v-if="curTN.tnIdeaPosition===1&&wfIdea.ideaLabelName===curTN.tnIdeaLabelName" :submit-handle="submitHandle" :common-idea-list="commonIdeaList" />
                      </td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </el-form>
      </template>
    </template>
  </div>
</template>
<script>

export default {
    name: 'HandleIdea',
    components: {

    },
    props: {
        wfIdeaList: { type: Array, default: function() { return [] } },
        wfJsonData: { type: Object, default: function() { return {} } },
        showEmptyLabel: { type: Boolean, default: true }
    },
    data() {
        return {
            ideaLabelGroup: null,
            curTN: {},
            submitHandle: null,
            commonIdeaList: null
        }
    },
    computed: {

    },
    watch: {
        wfJsonData: {
            handler() {
                if (this.wfIdeaList && this.wfIdeaList.length > 0) {
                    const ideaLabelGroup = this.$vnode.context.wfInstance.passenger.ideaLabelGroup || null
                    if (ideaLabelGroup !== null && ideaLabelGroup !== undefined) {
                        this.ideaLabelGroup = JSON.parse(ideaLabelGroup)
                    }
                    const ideaLables = document.querySelectorAll('.udm-ideaLable')
                    this.curTN = this.$vnode.context.curTN
                    const _this = this

                    for (let i = 0; i < _this.wfIdeaList.length; i++) {
                        let isFormIdea = false
                        ideaLables.forEach(ideaLable => {
                            let ideaLableName = ideaLable.innerText.trim()
                            if (ideaLable.querySelector('.lable')) {
                                ideaLableName = ideaLable.querySelector('.lable').innerText
                            }

                            if (ideaLableName === _this.wfIdeaList[i].ideaLabelName) {
                                let ideaDiv = ideaLable.querySelector('.ideaDiv')
                                if (!ideaDiv) {
                                    ideaDiv = ideaLable.parentElement.querySelector('.ideaDiv')
                                }
                                if (ideaDiv) {
                                    if (_this.wfIdeaList[i].ideaContent) {
                                        ideaDiv.innerHTML = this.wfIdeaList[i].ideaContent
                                    } else if (_this.curTN.tnIdeaPosition === 1 && ideaLableName === _this.curTN.tnIdeaLabelName) {
                                        ideaDiv.style.height = '1px'
                                        ideaDiv.style.minHeight = '1px'
                                    }
                                }

                                isFormIdea = true
                            }
                        })
                        if (isFormIdea) this.wfIdeaList.splice(i--, 1)
                    }

                    const ideaSignatures = document.querySelectorAll('.ideaSignature')
                    ideaSignatures.forEach(ideaSignature => {
                        ideaSignature.style.maxWidth = '100px'
                        ideaSignature.style.maxHeight = '50px'
                    })
                }
            },
            deep: true,
            immediate: true
        },
        wfIdeaList() {
            this.curTN = this.$vnode.context.curTN
            this.submitHandle = this.$vnode.context.submitHandle
            this.commonIdeaList = this.$vnode.context.commonIdeaList

            const _this = this
            this.wfIdeaList.forEach(idea => {
                if (idea.ideaContent === '' || idea.ideaContent === null) {
                    if (_this.curTN.tnIdeaPosition !== 1 || (_this.curTN.tnIdeaLabelName !== idea.ideaLabelName)) {
                        idea.ideaContent = '<div class="ideaDiv"><p /><p /></div>'
                        idea.isNull = true
                    }
                }
            })

            setTimeout(() => {
                this.showDoNextAttach()
            }, 0)
        }
    },
    created() {
        this.$bus.on('setIdeaLabelWidth', this.setIdeaLabelWidth)
    },
    beforeDestroy() {

    },
    mounted() {

    },
    methods: {
        showDoNextAttach() {
            const attachments = this.$vnode.context.attachments
            attachments.forEach(attach => {
                if (attach.fileType === 'DONEXT') {
                    const tnid = attach.updateBy.split('_')[1]
                    const ideaDivs = document.querySelectorAll('.ideaDiv')
                    ideaDivs.forEach(ideaDiv => {
                        if (ideaDiv.innerHTML.indexOf(tnid) !== -1) {
                            let downUrl = process.env.VUE_APP_BASE_API + '/' + this.$vnode.context.wfAttachUrl + '/downloadById?inline=true&attachIds=' + attach.id
                            downUrl += '&httpPort=' + location.port
                            ideaDiv.querySelector('.donext-attach').innerHTML = '<a href="javascript:" onclick="window.open(\'' + downUrl + '\');">' + attach.fileName + ' </a>'
                            ideaDiv.querySelector('.donext-attach').className = 'donext-attach el-link el-link--primary'
                        }
                    })
                }
            })
        },
        setIdeaLabelWidth() {
            this.$nextTick(() => {
                if (document.querySelector('.tdw13')) {
                    const form = document.querySelector('.form-container')
                    const formWidth = form.clientWidth * 0.131 + 'px'
                    document.querySelectorAll('.tdw17').forEach(td => {
                        td.style.width = formWidth
                    })
                    document.querySelectorAll('.tdw83').forEach(td => {
                        td.style.width = '87%'
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss" >
    .idea-form{
        margin-top: -1px;
        position: relative;
        z-index: 1000;
    }

    .el-form .el-table__body .tdcont{
        line-height: 20px;
    }

    /deep/ .highlight{
        font-weight: 600;
        color: #323233;
    }

    .idea-group{
        border-bottom: solid 1px #e4e5e8;
    }

    .l-text{
      font-weight: 600;
    }
</style>

<style lang="scss">
  .udm-ideaLable{
    vertical-align:top!important;
    .lable{
      color: #000;
    }
  }
   .ideaDiv{
        margin: 5px 0;
        p {
            margin-top: 0px;
            margin-bottom: 0px;
        }
        span {
            display:inline-block;
        }
        .handwritingIdea{
            width: 200px;
        }
        .ideaSignature{
            max-width: 100px;
            max-height: 50px;
        }

        .donext-attach{
            display: block;
        }
    }
    .ideaContentDiv{
        min-height: 55px;
    }
</style>

